<!-- 条件筛选 -->
<template>
  <div class="filter-container">
    <BackgroundBox>
      <ConditionFilter
        :EmptyBut="true"
        @headleSubmit="headleSubmit"
        @headleEmpty="headleEmpty"
      >
      </ConditionFilter>
      <div class="time">
        <div class="item">
          <div class="text">起始时间</div>
          <el-date-picker
            v-model="timeRef.StartTime"
            type="date"
            placeholder="请选择时间"
            style="width: 150px;"
            @change="StartChange"
          />
        </div>
        <div class="item">
          <div class="text">终止时间</div>
          <el-date-picker
            v-model="timeRef.EndTime"
            type="date"
            placeholder="请选择时间"
            style="width: 150px;"
            @change="EndChange"
          />
        </div>
      </div>
    </BackgroundBox>
  </div>
</template>

<script setup>
import ConditionFilter from "@/components/ConditionFilter/index.vue";
import BackgroundBox from "@/components/BackgroundBox/index.vue";
import { ref } from "vue";
import moment from "moment";
const conditionRef = ref({});
const emit = defineEmits(["headleSubmit"])
const timeRef = ref({
    StartTime:"",
    EndTime: "",
})
// 初始时间
const StartChange = () =>{
  if(!timeRef.value.EndTime || !timeRef.value.StartTime){
    return
  }
    if(timeRef.value.StartTime > timeRef.value.EndTime){
        ElMessage.error('起始时间不能大于终止时间')
        timeRef.value.StartTime = "";
        return
    }
}
// 终止时间
const EndChange = () =>{
  if(!timeRef.value.EndTime || !timeRef.value.StartTime){
    return
  }
    if(timeRef.value.StartTime > timeRef.value.EndTime){
        ElMessage.error('起始时间不能大于终止时间')
        timeRef.value.EndTime = "";
        return
    }
}
// 获取条件数据
const headleSubmit = (data) => {
    for (const key in data) {
        conditionRef.value[key] = data[key] ? data[key][0].id : ""
    }
  conditionRef.value.StartTime = timeRef.value.StartTime 
  conditionRef.value.EndTime = timeRef.value.EndTime 
  emit("headleSubmit",conditionRef.value)
};
// 清空条件数据
const headleEmpty = () => {
  timeRef.value.StartTime = "";
  timeRef.value.EndTime = "";
  for (const key in conditionRef.value) {
    conditionRef.value[key] = ""
  }
  emit("headleSubmit",conditionRef.value)
};
</script>

<style lang="less" scoped>
.filter-container{
    width: 100%;
    height: 120px;
    .time{
        display: flex;
        padding: 0 20px ;
    }
    .item{
        display: flex;
        align-items: center;
        margin-right: 20px;
        .text{
            margin-right:10px;
        }
        
    }
}
</style>